<template>
  <view class="main-page">
    <component :is="components[activeComponentName]"></component>
    <tabBar002
      @changeComponent="changeComponent"
      :initComponentName="activeComponentName"
      :tabBarList="tabBarList"
    ></tabBar002>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import homePage from "./pageComponents/homes/homePage.vue";
import collectPage from "./pageComponents/collect/collectPage.vue";
import selectedPage from "./pageComponents/selected/selectedPage.vue";
import shoppingCartPage from "./pageComponents/shoppingCart/shoppingCartPage.vue";
import personalCenterPage from "./pageComponents/personalCenter/personalCenterPage.vue";

const props = defineProps({});
// 注册homePage组件
const components = {
  homePage,
  collectPage,
  selectedPage,
  shoppingCartPage,
  personalCenterPage,
};
onLoad((option) => {
  // 根据参数获取当前页面索引
  activeComponentName.value = tabBarList[option.pageIndex].componentName;
});
const activeComponentName = ref("homePage");
const tabBarList = [
  {
    title: "首页",
    imageUrl: "/static/common/weipinhui/tabBar/home.png",
    imageUrlActive: "/static/common/weipinhui/tabBar/home-active.png",
    componentName: "homePage",
  },
  {
    title: "收藏",
    imageUrl: "/static/common/weipinhui/tabBar/collect.png",
    imageUrlActive: "/static/common/weipinhui/tabBar/collect-active.png",
    componentName: "collectPage",
  },
  {
    title: "精选",
    imageUrl: "/static/common/weipinhui/tabBar/label.png",
    imageUrlActive: "/static/common/weipinhui/tabBar/label-active.png",
    componentName: "selectedPage",
  },
  {
    title: "购物车",
    imageUrl: "/static/common/weipinhui/tabBar/cart.png",
    imageUrlActive: "/static/common/weipinhui/tabBar/cart-active.png",
    componentName: "shoppingCartPage",
  },
  {
    title: "个人中心",
    imageUrl: "/static/common/weipinhui/tabBar/my.png",
    imageUrlActive: "/static/common/weipinhui/tabBar/my-active.png",
    componentName: "personalCenterPage",
  },
];

const changeComponent = (name) => {
  activeComponentName.value = name;
};
</script>

<style scoped lang="less"></style>
